<!DOCTYPE html>
<html>
<head>
  <title>Image Sprite</title>
  <script src="../../kontra.js"></script>
</head>
<body>
  <canvas id="game" width="600" height="400" style="background: #333331"></canvas>
  <script id="code">
    // initialize the game and setup the canvas
    let { canvas, context } = kontra.init();

    // set image path so we don't have to reference the image by it's path
    kontra.setImagePath('../imgs/');

    // load the image
    kontra.load('character.png').then(function() {

      // pass the image to the sprite
      window.sprite = kontra.Sprite({
        anchor: {
          x: 0.5,
          y: 0.5
        },
        x: 300,
        y: 200,
        image: kontra.imageAssets.character
      });

      // render the sprite
      sprite.render();
    });
  </script>
  <script src="../prism/codeOutput.js"></script>
</body>
</html>